<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!-- 偏移量100 ， 圆心(100 500) 实际 400*400大小坐标系-->
    <svg id="svg" 
        viewBox="0 0 600 600"
        width="800" height="800">
        <text x="100"  y="30" >博客周访问量</text>
        <!-- 绘制横轴 5条 0 100 200 300 400-->   
        <path class="line"
            d="M100 100H500 M100 200H500 M100 300H500 
            M100 400H500 M100 500H500"></path> 

        <!-- 绘制y轴数字-->
        <text class="y-text" x="50" y="108">400</text>  
        <text class="y-text" x="50" y="208">300</text>  
        <text class="y-text" x="50" y="308">200</text>  
        <text class="y-text" x="50" y="408">100</text>  
        <text class="y-text" x="50" y="508">0</text>    

        <!-- 绘制x轴小竖线及文字  7天 400/7=57-->
        <path class="line"
            d="M100 500V510 M157 500V510 M214 500V510 M271 500V510 
            M328 500V510 M385 500V510 M442 500V510 M500 500V510"></path>

        <text class="x-text" x="115" y="515">Mon</text>
        <text class="x-text" x="172" y="515">Tue</text>
        <text class="x-text" x="229" y="515">Wed</text>
        <text class="x-text" x="286" y="515">Thu</text>
        <text class="x-text" x="343" y="515">Fri</text>
        <text class="x-text" x="400" y="515">Sat</text>
        <text class="x-text" x="457" y="515">Sun</text>

        <!-- 绘制柱 一段57 左右各留12 57-24=33 -->
        <!--Mon 320 500-320 = 180-->
        <rect class="pillar" x="112" y="180" width="33" height="320" />
        <rect class="pillar" x="169" y="100" width="33" height="400" />
        <rect class="pillar" x="226" y="300" width="33" height="200" />
        <rect class="pillar" x="283" y="280" width="33" height="220" />
        <rect class="pillar" x="340" y="320" width="33" height="180" />
        <rect class="pillar" x="397" y="450" width="33" height="50" />
        <rect class="pillar" x="454" y="150" width="33" height="350" />
    </svg>
</body>
</html>